React菜雞-Day4：JSX～混搭前端三元素就是~潮!

第 12 屆 iThome 鐵人賽

DAY 4

自我挑戰組

菜雞們，讓我們一起征服JS及React吧系列第 4 篇

12th鐵人賽

小偉哥

2020-09-07 13:43:38

2581 瀏覽

分享至

tags: `鐵人賽` `React` `javascript` `nodejs` `vscode`

來到了鐵人賽的第四天，先為自己沒被 monday blue給擊倒歡呼一下。
還記得這段程式碼嗎? 我們在鐵人賽day2小試身手的一個範例，你一定會好奇，為什麼在.js檔案下可以把html及css混搭使用。這就是我們今天的主題~JSX語法()。

先聊聊html及javascript的關係

通常要完成一個網頁的元素，你會使用html的標籤語法來撰寫，那如果要改成javascript撰寫呢？

// html範例(一行搞定)
    <div class="title">OKLA</div>

// javascript(三行!! 不夠潮)
    let divElement = document.createElement("div");  //<--建立一個div物件object
    let divString = document.createTextNode("OKLA"); //<--建立另一個物件，字串為"OKLA"
    divElement.appendChild(divString); //<-- 將字串物件放入div物件中，即完成一個完整的div物件

相比之下，javascript的寫法太囉唆，不夠潮，所以JSX誕生，讓我們可以在寫javascript時，
同時寫入html及css，保留了html的簡潔，與javascript的邏輯互相搭配，帥慘了。

JSX的原理

JSX全名叫做 JavaScript extension syntax，簡單來說，React靠JSX把html及css轉譯成javascript的物件，讓大家都在同一個星球裡共生，就是JSX厲害的地方！
舉個例子，他會將我們剛剛的html範例變成:

// html:
  <h1 style={{color:"gold"}}>{"You did a good job!!"}</h1>}

// JSX編譯後:
  React.createElement(
    "h1",
    {color: "gold"},
    "You did a good job!!"
  )

大括號為JSX指引編譯的方向

JSX能夠順利的辨別哪些程式碼要進行編譯，靠的就是大括號{ [JSX這裡要編譯喔] }。

小試身手

我們把原本加入的那一段程式碼，做個調整，你可以直接把底下程式碼覆蓋整個App.js，或看懂後，自己嘗試coding
範例1:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  // === 新增的程式碼 ===
  let element = <h1 style={{color:"gold"}}>{"You did a good job!!"}</h1>; //<-- 宣告一個變數，並賦予他html的標籤元素
  console.log("show element detail:", element) //<-- 印出來看看，你會發現html的資訊被轉譯為 javascript 的object
  // ==================

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>

        {/* {<h1 style={{color:"gold"}}>{"You did a good job!!"}</h1>} */}
        
        {/*  === 新增的程式碼 === */}
        {/* 底下用大括弧把上面宣告的element包起來 */}
        {element}      
        {/* ================== */}
        

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

按下save，打開Chrome瀏覽器，我們開啟inspector來檢視一下
開啟inspector後，點選上方的Console標籤，及左方的(i)info標籤，你會看到，element原本存放<h1>標籤，真的被轉譯成javascript的object了。?

謹慎服用JSX

JSX使用時有幾個地方要注意一下：

css的參數要使用駝峰式的命名, ex: text-size 改寫為 textSize

html用的class，在這裡要變成className，以避免跟js的class混用，ex: <h1 className="title">{"I'm a title"}</h1>

JSX{}括號裡面不能宣告變數，變數請放在func之內，return()之上，請參考剛剛的範例1:

回傳的element，你要包在一個container裡面，版本差異的部分如下，React>=16之後，給個空的<></>即可，我們稱之為React Fragment

// React<16, 要用一個div container給他
return(
    <div>
      <h1 style={{color:"gold"}}>{"You did a good job!!"}</h1>
    </div>
    )

//React >=16, 用一個空的標籤 (<> JSX </>) 包起來即可
return(
    <>
      <h1 style={{color:"gold"}}>{"You did a good job!!"}</h1>
    </>
    )